const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 当前工作模式是不是开发模式，但是这个需要单独给process配置
// const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    mode: 'development',
    devServer: {
        static: './public',
    },
    entry: './src/login/index.js',
    output: {
        // 定义输出目录
        path: path.resolve(__dirname, 'dist'),
        // 定义输出JS文件名（可以包括路径）
        filename: 'login/index.js',
        // 打包前清除 输出目录
        clean: true,
        // 自定义资源文件名（包括路径）全局配置，优先级低于 rules 中 generator 指定的资源名
        assetModuleFilename: 'images/[hash][ext][query]'
    },

    plugins: [
        // new HtmlWebpackPlugin(), // Generates default index.html
        new HtmlWebpackPlugin({  // Also generate a test.html
            // 这个输出路径是基于 dist 而言的
            filename: path.resolve(__dirname, './dist/login.html'),
            template: path.resolve(__dirname, './public/login.html'),
        }),
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            // 匹配css
            {
                // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
                // type: "javascript/auto",
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ],
            },
            // 匹配less
            {
                // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
                // type: "javascript/auto",
                // test: /\.(sa|sc|c)ss$/i,
                test: /\.less$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    'less-loader',
                ],
            },
            // 处理其他资源
            {
                test: /\.(png|jpg|gif)$/i,
                type: 'asset',
                // 自动处理资源类型（大于8k为resource，否则以inline）
                // 如果要修改8kb的这个临界值使用以下配置
                // parser: {
                //     dataUrlCondition: {
                //         maxSize: 4 * 1024 * 1024 // 4mb
                //     }
                // },
                // 自定义当前类型资源 生成的路径，优先级高于全局配置
                generator: {
                    filename: 'static/[hash][ext][query]'
                }
            },
            // 处理html中直接引用的资源
            {
                test: /\.html$/,
                loader: 'html-loader',
            }
        ],
    },
    optimization: {
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            `...`,
            new CssMinimizerPlugin(),
        ],
    },

    // 性能提示配置
    performance: {
        // 性能提示等级  false（关闭提示） | "warning"（警告，依然打包） | "error"（报错，中断打包）
        hints: 'warning',
        // 所有     
        maxEntrypointSize: 100 * 1024 * 1024,
        // 单个资源最大体积
        maxAssetSize: 100 * 1024 * 1024,
        // 过滤出要检测的资源文件
        // assetFilter: function (assetName) {
        // 此处只检测 JS 文件的大小
        //     return /\.js$/.test(assetName) 
        // }
    }
};


